 $(function(){
   var data2='';
   
  //  发送ajax请求
  $.get('../php/list.php',res=>{
    var {meta:{status,msg},data} = res
    if(status==1){
    //    遍历获取到的数据
    var str=''
    var i=0;
    data2=data;
  try{
    data.forEach(element => {
        if(str===''){
          str+=`<li class="ac">
          <a href="../HTML/list.html">
            <img src="${element.image}.jpg" />
          </a>
        </li>`
        }else{
          str+=`<li>
          <a href="../HTML/detail.html?id=${element.id}">
            <img src="${element.image}.jpg" />
          </a>
        </li>`
        }
        i++;
        if(i>=6)throw Error();
    });
  }catch(e){
  }
  $('.box ul').html(str);
  new Swiper('.box','.goPrev','.goNext');
  // 将json对象转换为字符串
  // var dataStr=eval(data);
  
  showphoto(data,i,4,1);

  $('.goPrev3').click(function (){
    var id=$(this).parent().children().first().attr('href').split('?')[1].split('&')[0].split('=')[1];
    // 向前即id应该-4并对数据库数据12取余数
    id=(id-4+12)%12;
    console.log(id);
    if(id<10) num1=4; else num1=12-id;
    showphoto(data2,id,num1,0);
    if(num1<4){
      var ss=4-num1;
      showphoto(data2,0,ss,2);
    }
  })
  $('.goNext3').click(function (){
    var id=$(this).parent().children().first().attr('href').split('?')[1].split('&')[0].split('=')[1];
    // 向前即id应该-4并对数据库数据12取余数
    id=(id+4)%12;
    if(id<10) num=4; else num=12-num;
    showphoto(data2,id,num,0);
    if(num<4){
      var ss=4-num;
      showphoto(data2,0,ss,2);
    }
  }) 
  function showphoto(data,i,num2,fl){
    // console.log(i);
    var str2='';
    var j=0;
    try{
      data.forEach(element => {
        if(element.id>=i){
      str2+=`
      <a href="../HTML/detail.html?id=${element.id}" class="ima">
      <div class="content_image">
          <img src="${element.image}.jpg" style="width: 100%;
          height: 100%;">
      </div>
     <h6 class="image-detail">${element.name} ${element.description}</h6>
     <div class="seckill-item__price">
         <span class="price-miaosha">
             <i>¥</i>
             <span style="margin-left:-5px;">${element.pirce}</span>
         </span>
         <span class="price-origin">
             <i>¥</i>
             <span>${element.oldprice}</span>
         </span>
     </div>
  </a>
      `
      i++;
      j++;
      if(j>=num2)throw Error();
        }
    });
    
  }catch(e){
  }
  // console.log(str2);
  // console.log(fl,'33333');
  if(fl==1){ 
  $('.content-photo .ima').remove();
  $('.content-photo').prepend(str2);
  }else if(fl==0){
    $('.content-photo .ima').remove();
    $('.content-photo').prepend(str2);
  }else{
    $('.content-photo .ima').last().after(str2);
  }
  
  } 
  }
  },'json')
  
//  判断用户是否登陆
var username = getCookie('username')
if(username){
    $('.customNav').html(`
    <li style="color:#ccc">
        欢迎:<span style="color:red;">${username}</span>
    </li>
    <li>
        <a href="javascript:;" class="logout">退出</a>
    </li>
    `)
    // 购物车中的数据
    // 先判断本地存储中是否有数据
   var data = localStorage.getItem('data')
   // console.log(data);
   if(!data){
       var arr = [];
   }else{
       var arr = JSON.parse(data)
   }
   $('.shoppingCart .num').html(arr.length);
    $('.logout').click(function(){
        removeCookie('username')
        $('.customNav').html(`
        <li>
            <a href="javascript:;">登录</a>
        </li>
        <li>
            <a href="register.html">注册</a>
        </li>
        `)
        gologin()
    })
    
}else{
  $('.customNav').html(`
  <li>
      <a href="javascript:;">登录</a>
  </li>
  <li>
      <a href="register.html">注册</a>
  </li>
  `)
  gologin()
    
}
gologin()
// 购物车点击事件
$('.shoppingCart').on('click',function(){
  if(username){
    location.href="../HTML/shop-cart.html"
  }else{
    layer.msg('请先登录！！！',{
      icon:2,
      time:1500
  },function(){
      localStorage.setItem('url',location.href)
      location.href = "login.html";
  })
  }

})
// 登陆
function gologin(){
  $('.customNav li:first a').click(function(){
      // 点击登录
      // 跳转之前先设置一个本地存储将当前url存起来
      localStorage.setItem('url',location.href)
      // 需要跳转到登录页
      location.href = "login.html";
      // 登录成功后需要跳回来
  })
}
 //tab 表中当滑到不同栏中显示不同的内容
 $('.left-category ul li').hover(function () {
    var index = $(this).index();
    $(this).addClass('on').siblings().removeClass('on');
    $('.pro-right').removeClass('active').eq(index).addClass('active');
})
//当鼠标滑到左侧li时，轮播图和广告都隐藏，显示tab表的内容
$('.left-category ul li').mouseover(function(){
    $(".box").css("display","none");
    $('.box-right').css("display","none");
    $('.pro-advertise').css("display","none");
    $(".active").css("display","block");

})
//鼠标滑出的时候，tab表内容隐藏，轮播图和广告显示。
$('.left-category ul li').mouseout(function(){
    $(".box").css("display","block");
    $('.box-right').css("display","block");
    $('.pro-advertise').css("display","block");
    $(".pro-right").css("display","none");

})
//京东倒计时
function ji() {
  // 2 设置场数名称  8-10  8 点场   10-12 10点场  12-14 12点场.只有偶数场
  var nowDate = new Date();
  // 2-1 判断小时是否为偶数
  var h = nowDate.getHours();
  if (h % 2) {
    h--;
  }
  // 2-2 设置当前场数
//   js语法设置倒计时
  $('.countdown-desc strong').text(h+":00"); 
  // 3 计算设置时分秒倒计时

  // 3-1 设置结束时间
  var endTime = new Date();
  endTime.setHours(h + 2);
  endTime.setMinutes(0);
  endTime.setSeconds(0);

  // 3-2 计算当前时间和结束时间的差值
  var diff = (endTime - nowDate) / 1000;
  // 3-3 计算小时,分钟,秒数

  var tmpH = parseInt(diff / 60 / 60);
  var tmpM = parseInt((diff / 60) % 60);
  var tmpS = parseInt(diff % 60);

  // 3-4 设置到页面中
  $('.hour').text('0' + tmpH);
  $('.minute').text(tmpM < 10 ? '0' + tmpM : tmpM);
  $('.second').text(tmpS < 10 ? '0' + tmpS : tmpS);
}
ji();
setInterval(ji, 1000);

})


